<template>

  <div class="custom-data-layout">
    <el-select v-model="pageProps.dataType" placeholder="请选择" style="left: 15px" @change="changeType">
      <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <div class="custom-data-card">
      <v-container grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex xs12 sm6 md4 lg3 v-for="(card, index) in cards" :key="index">
            <info-card ref="index" :card="card"></info-card>
          </v-flex>
          <div class="custom-data-pagination">
            <data-pagination v-if="hackReset"></data-pagination>
          </div>
        </v-layout>
      </v-container>
      <map-dialog></map-dialog>
      <dataPreviewDialog></dataPreviewDialog>
    </div>
  </div>
</template>

<script>
    import infoCard from '../../components/card/infoCard'
    import mapDialog from "../../components/dialog/mapDialog"
    import dataPreviewDialog from '../../components/dialog/dataPreviewDialog'
    import dataPagination from "../../components/pagination/dataPagination"

    export default {
        name: "pubData",
        data(){
            return {
                hackReset:false,
                // str1:[16,17,18,19,20,21,32,34,43,29,23,4,26,56,57,46,4,45,39,36,49],
                // str2:[11,8,3,1,6,47,27,28,42,54,55,14,31,13,10,52,4,37],
                // str3:[9,7,51,52,53,15],
                // dataType1:[],
                // dataType2:[],
                // dataType3:[],
                options: [{
                    value: '',
                    label: '全部数据'
                }, {
                    value: '基础地理数据',
                    label: '基础地理数据'
                }, {
                    value: '社交网消费性大数据',
                    label: '社交网消费性大数据'
                }, {
                    value: '对地观测大数据',
                    label: '对地观测大数据'
                }],
                cards: null,
                pageProps: {
                    dataType:'',
                    pageSize: 12,
                    currentPage: 1
                }
            }
        },
        components: {
            "info-card": infoCard,
            "map-dialog": mapDialog,
            "dataPreviewDialog":dataPreviewDialog,
            "data-pagination": dataPagination
        },
        watch: {
            pageProps:{
                deep: true,
                handler(val, oldVal){
                    // console.log(val,oldVal);
                    this.getData(val);
                }
            }
        },
        methods: {
            getData: function(pageProps){
                let that = this;
                console.log(pageProps);
                that.$axios.get('/data/list',
                    { offset: (pageProps.currentPage - 1) * pageProps.pageSize,
                        size: pageProps.pageSize,
                        type:pageProps.dataType,
                    }).then(function(res){
                    console.log(res.body.data.length);
                    that.cards = res.body.data;
                    console.log(that.cards);
                    that.$Bus.$emit("totalSize", res.body.totalSize);
                }).catch(function(err){console.log(err);})
            },
            // getDataType:function(){
            //     let that = this;
            //     this.$axios.get('/data/list?offset=0&size=100')
            //         .then(function(res){
            //             let result=res.body.data;
            //             for(let i=0;i<result.length;i++){
            //                 let dataId=result[i].data.pk_meta_id;
            //                 // console.log(dataId);
            //                 if(that.str1.indexOf(parseInt(dataId))!=-1){
            //                     that.dataType1.push(result[i]);
            //                 }
            //                 else if(that.str2.indexOf(parseInt(dataId))!=-1){
            //                     that.dataType2.push(result[i]);
            //                 }
            //                 else{
            //                     that.dataType3.push(result[i]);
            //                 }
            //             }
            //
            //         })
            // },
            changeType(){
                this.hackReset = false;
                this.$nextTick(() => {
                    this.hackReset = true
                });
                this.pageProps.currentPage=1;
                this.cards=[];
                this.getData(this.pageProps);
                // let that = this;
                // that.$axios.get('/data/list',
                //     { offset: 0,
                //         size: pageProps.pageSize,
                //         type:dataType,
                //     }).then(function(res){
                //     that.cards = res.body.data;
                //     console.log(that.cards);
                //     that.$Bus.$emit("totalSize", res.body.totalSize);
                // }).catch(function(err){console.log(err);})
            }
            // changeType(val){
            //   // this.getDataType();
            //   if(val=='全部数据'){
            //       this.getData(this.pageProps);
            //   }
            //   else if(val=='基础地理数据'){
            //       // this.cards=[];
            //       this.cards=this.dataType1;
            //       console.log(this.dataType1.length);
            //       this.$Bus.$emit("totalSize", this.dataType1.length);
            //
            //   }
            //   else if(val=='社交网消费性大数据'){
            //       this.cards=this.dataType2;
            //       this.$Bus.$emit("totalSize", this.dataType2.length);
            //   }
            //   else{
            //       this.cards=this.dataType3;
            //       this.$Bus.$emit("totalSize", this.dataType3.length);
            //   }
            //   console.log(this.cards);
            // }
        },
        created(){
            this.$Bus.$on("pageSize", (params)=>{this.pageProps.pageSize = params;});
            this.$Bus.$on("currentPage", (params)=>{this.pageProps.currentPage = params;});
        },
        mounted: function(){
            // this.getData(this.dataType,this.pageProps);
            // this.getDataType();
            this.hackReset=true;
            this.getData(this.pageProps);

        },
        // mounted(){
        //   this.getDataType();
        // }
    }
</script>

<style>
  .container.grid-list-md .layout .flex {
    padding: 10px 5px 10px 10px;
  }
  .custom-data-layout{
    height: 100%;
    width: 100%;
  }
  .custom-data-card{
  }
  .custom-data-pagination{
    width: 100%;
  }
</style>
